<template>
	<view class="content">
		<!-- <view class="myGold">
			<text class="gold">我的余额：</text>
			<text class="price">￥{{available_predeposit}}</text>
		</view> -->
		<view class="choose">
			<view class="choose_item">请选择充值数量</view>
			<view class="list">
				<view class="list_item" v-for="(item,index) in list" :key="index" :class="{activeBgc: cur == index}" @click="curFn(index)">
					<text class="gold">{{item.gold}}</text>
					<text class="price">￥{{item.price}}</text>
					<view class="pic" v-if="cur == index">
						<view class="gou"></view>
					</view>
				</view>				
			</view>
		</view>
		<view class="payMethod">
			<view class="chooseMethod">请选择支付方式</view>
			<!-- #ifdef APP-PLUS -->
				<view class="Alipay" @click="alipayClick">
					<view class="AlipayPic">
						<image src="/static/images/payment/alipay.png" mode=""></image>
						<text>支付宝支付</text>
					</view>
					<view class="pic" v-if="isShow">
						<view class="circle">
							<view class="gou-white gou"></view>
						</view>
					</view>
					<view v-else class="no-s"></view>
				</view>
			<!-- #endif -->
			
			<view class="Alipay" @click="weChat">
				<view class="AlipayPic">
					<image src="/static/images/payment/wxpay.png" mode=""></image>
					<text>微信支付</text>
				</view>
				<view class="pic" v-if="flag">
					<view class="circle">
						<view class="gou-white gou"></view>
					</view>
				</view>
				<view v-else class="no-s"></view>
			</view>
		</view>
		<view class="payBottom">
			<view class="money">
				<text>支付金额: </text>
				<text class="price">￥{{s_price}}</text>
				<!-- .toFixed(2) -->
			</view>
			<view class="btn">
				 <button  @click="get_payid">确认支付</button>
				 <!-- :class="{'active':buts}" :disabled="buts" -->
			</view>
		</view>
		<min-window v-if="flv_url&&state"  :flv_url="flv_url"></min-window>
	</view>
</template>

<script>
	import {mapGetters,mapActions} from 'vuex';
	import MinWindow from '@/live/components/MinWindow/MinWindow'
	export default {
		components:{MinWindow},
		data() {
			return {
				available_predeposit:"",
				isShow: true,
				flag: false,
				is_click:false,
				cur: 0,
				sele_pay:'',
				s_price:'10.00',
				pay_sn:'',
				payment_code:'',
				getPaymentList:[],
				list: [],
				client:1,
				wxcode:"",
				state:"",
				flv_url:"",
			}
		},
		onLoad(e) {
			if(e.state){
				this.state=e.state
			}
			if(uni.getStorageSync('flv')){
				this.flv_url=uni.getStorageSync('flv')
			}
			let that = this
			
			// #ifdef APP-PLUS
				this.client=1
			// #endif
			// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						that.wxcode=loginRes.code
					}
				});
				this.client=2
			// #endif
			// #ifdef H5
				this.client=3
			// #endif
			this.getList()
			this.$liveutil.request({
				url:'/mobile/index.php?act=member_payment&op=getPaymentList',
				method:'post',
				data:{}
			}).then(res=>{
				this.getPaymentList = res.datas;
				if(this.client==1){
					this.payment_code = "alipay"
				}else if(this.client==2){
					this.payment_code = "mini_pay_2"
				}else if(this.client==3){
					this.payment_code = "h5_alipay"
				}
			});
		},
		
		methods: {
			alipayClick() {//选择支付宝支付
				this.isShow = true;
				this.flag = false;
				this.sele_pay = 'alipay';
				// this.payment_code ="alipay"
			},
			weChat() {//选择微信支付
				this.flag = true;
				this.isShow = false;
				this.sele_pay = 'app_wxpay';
				// this.payment_code = "h5_wxpay"
			},
			curFn(index) {//选择支付金额
				this.cur = index;
				this.s_price = this.list[index].price;
			},
			getList(){//获取充值金额列表
				let that=this
			     this.$liveutil.request({
					// url:'index.php?act=predeposit&op=recharge_index',
					url:'/live/index.php?act=api-gold&op=rechargeAmountList',
					method:'post',
					data:{}
				}).then(res=>{
					 // that.available_predeposit=res.datas.member_info.available_predeposit
					 that.list=res.datas.list
					 that.s_price=res.datas.list[0].price
				})
			},
			 get_payid(){//确认支付
					 let payment_code=''
					 if(this.sele_pay=='alipay'){
						// #ifdef APP-PLUS
							payment_code="alipay"
						// #endif
						// #ifdef H5
							payment_code='h5_alipay'
						// #endif
					 }else if(this.sele_pay == 'app_wxpay'){
						// #ifdef APP-PLUS
							payment_code="app_wxpay"
						// #endif
						// #ifdef H5
							let ua = window.navigator.userAgent.toLowerCase();
							if (ua.match(/MicroMessenger/i) == 'micromessenger') {
								payment_code='wxpay'
							} else {
								payment_code='h5_wxpay'
							}
						// #endif
						// #ifdef MP-WEIXIN
							
						
						if(uni.getAccountInfoSync().miniProgram.appId == "wx778400e5275e1cae"){
							payment_code='mini_pay_2'
						}else{
							payment_code='mini_wxpay'
						}
						// #endif
					 }else{
						 uni.navigateTo({
						 	title:"请选择支付方式",
							icon:"none"
						 })
					 }
				this.$liveutil.request({//生成订单
					url:'index.php?act=gold&op=recharge_add',
					method:'post',
					data:{gdr_amount:this.s_price}
				}).then(res=>{
					this.pay_sn = res.datas.pay_sn;
					this.$liveutil.request({//支付接口
						url:'index.php?act=member_payment&op=gold_order',
						method:'post',
						data:{
							pay_sn:this.pay_sn,
							payment_code:payment_code,
							wx_code:this.wxcode
						}
					}).then(res=>{
						if(res.error_code == 0){
							this.pay_zf(res.datas);
						}
					})
				})
				
			},
			pay_zf(datas){//第三方支付
				// #ifdef H5
					if(this.payment_code=="h5_wxpay"){
						window.location.href = datas
					}else{
						document.write(datas)
					}
				// #endif
				// #ifdef MP-WEIXIN
					uni.requestPayment({
						provider:'wxpay',
						timeStamp: datas.timeStamp + '',
						nonceStr: datas.nonceStr,
						package: datas.package,
						signType: datas.signType,
						paySign: datas.paySign,
						success: function(e) {
							uni.showToast({
								title: "支付成功",
								icon: 'none',
								success() {
									setTimeout(()=>{
										uni.navigateBack();
									},1500)
								}
							});
						},
						fail: function(err) {
							uni.showModal({
								content: "支付失败 ",
								showCancel: false,
							})
							console.log('fail:' + JSON.stringify(err));
						}
					});
				// #endif
				// #ifdef APP-PLUS
					uni.requestPayment({
					    provider: this.sele_pay, 
					    orderInfo: datas,
					    success: (e) => {
					        uni.showToast({
					            title: "支付成功!",
								success() { 
									setTimeout(()=>{
										uni.navigateBack(1);
									},1500)
								}
					        })
					    },
					    fail: (e) => {
					        uni.showToast({
					            title: e.errMsg,
								icon:'none'
							})
					    }
					})
				// #endif
				
			}
		}
	}
</script>

<style lang="scss">
	.circle{
		position: relative;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: #ff3355;
	}
	.gou{
		position: absolute;
		top: 10px;
		left: -11px;
		width: 14rpx;
		height: 22rpx;
		border-right: 4rpx solid #fff;
		border-bottom: 4rpx solid #fff;
		transform: rotate(45deg);
	}
	.gou-white{
		top: 43%;
		left: 50%;
		transform: translate(-50%,-50%) rotate(45deg);
	}
	.no-s{
		width: 40rpx;
		height: 40rpx;
		border: 2rpx solid #ccc;
		border-radius: 50%;
	}
	.content {
		width: 100%;
		background-color: #f0f0f0;
		.myGold {
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			width: 100%;
			height: 90rpx;
			background-color: #fff;
			text {
				  font-size: 30rpx;
				  font-family: "Adobe Heiti Std";
				  color: rgb(51, 51, 51);
			}
			.price {
				color: #ff9b5a;
			}
		}
		.choose {
			width: 100%;
			.choose_item {
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				height: 90rpx;
				width: 100%;
				font-size: 30rpx;
				font-family: "PingFang";
				color: rgb(153, 153, 153);
				font-weight: bold;
				background-color: #fff;
				margin-top: 20rpx;
			}
			.list {
				width: 100%;
				display: flex;
				padding: 0 20rpx 20rpx 20rpx;
				box-sizing: border-box;
				background-color: #fff;
				flex-wrap:wrap;
				.list_item {
					position: relative;
					width: 30.7%;
					height: 150rpx;
					margin-right: 20rpx;
					display: flex;
					border: 1px solid #e7e7e7;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					border-radius: 10rpx;
					&:nth-child(3n) {
						margin-right: 0;
					}
					&:nth-child(n + 4) {
						margin-top: 20rpx;
					}
					.gold {
						  font-size: 32rpx;
						  font-family: "PingFang";
						  color: rgb(51, 51, 51);
						  font-weight: bold;
					}
					.price {
						  font-size: 28rpx;
						  font-family: "PingFang";
						  color: rgb(153, 153, 153);
					}
					
					.pic {
						position: absolute;
						bottom: 0;
						right: 0;
						display: flex;
						justify-content: flex-end;
						align-items: flex-end;
						 width: 0;
						 height: 0;
						 border-bottom: 50rpx solid #ff3355;
						 border-left: 50rpx solid transparent;
						.icon-check {
							  font-size: 30rpx;
							  color: #fff;
							  margin-bottom: -25px;
						}
					}
				}
				.activeBgc {
					border-color: #ff3355;
				}
			}
		}
		.payMethod {
			width: 100%;
			margin-top: 20rpx;
			background-color: #fff;
			.chooseMethod {
				width: 100%;
				height: 90rpx;
				padding: 0 20rpx;
				line-height: 90rpx;
				  font-size: 30rpx;
				  font-family: "PingFang";
				  color: rgb(153, 153, 153);
				  font-weight: bold;
				  }
			.Alipay {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20rpx;
				height: 100rpx;
				.AlipayPic {
					display: flex;
					align-items: center;
					height: 50rpx;
					image {
						width: 50rpx;
						height: 100%;
					}
					text {
						  font-size: 36rpx;
						  font-family: "PingFang";
						  color: rgb(51, 51, 51);
						  font-weight: bold;
						  margin-left: 20rpx;
					}
				}
				.pic {
					display: flex;
					justify-content: center;
					align-items: center;
					span {
						background-color: #ff3355;
						border-radius: 50%;
						color: #fff;
					}
				}
				}
			}
			.payBottom {
				box-shadow: -2upx 0 2upx #ccc;
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				padding: 10upx 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				margin-top: 297rpx;
				.money {
					  font-size: 30rpx;
					  font-family: "PingFang";
					  color: rgb(51, 51, 51);
					  font-weight: bold;
					.price {
						margin-left: 8rpx;
						color: #ff3355;
					}
				}
				.btn {
					display: flex;
					 
					 button {	
						 
					 color: #fff;
					 background-image: -moz-linear-gradient( 0deg, rgb(255,122,34) 0%, rgb(255,70,34) 100%);
					 background-image: -webkit-linear-gradient( 0deg, rgb(255,122,34) 0%, rgb(255,70,34) 100%);
					 background-image: -ms-linear-gradient( 0deg, rgb(255,122,34) 0%, rgb(255,70,34) 100%);
					 }
					 .active{
						 background-image: -moz-linear-gradient( 0deg, rgb(240,240,240) 0%, rgb(193,193,193) 100%);
						 background-image: -webkit-linear-gradient( 0deg, rgb(240,240,240) 0%, rgb(193,193,193) 100%);
					 	background-image: -ms-linear-gradient( 0deg, rgb(240,240,240) 0%, rgb(193,193,193) 100%);
					 }
				}
			}
	}
	
</style>
